<template>
	<view class="address-info">
		<view class="address-info-group">
			<view class="address-info-cell">
				<view class="address-info-cell-tit">姓名</view>
				<view class="address-info-cell-input"><input type="text" placeholder="请输入姓名" v-model="form.consignee"/></view>
			</view>
			<view class="address-info-cell">
				<view class="address-info-cell-tit">手机号</view>
				<view class="address-info-cell-input"><input type="digit" placeholder="请输入手机号码" v-model="form.mobile"/></view>
			</view>
			<view class="address-info-cell">
				<view class="address-info-cell-tit">所在地区</view>
				<view :class="['address-info-cell-input',{active: region}]" @click="selectRegion">
					{{region?region:'请选择所在地区'}}
				</view>
				<view class="address-info-cell-arrow"><image src="https://master.shengejiaju.cn/web/static/icons/ico_more_goods@2x.png"></image></view>
			</view>
			<view class="address-info-cell address-des">
				<view class="address-info-cell-tit">详细地址</view>
				<view class="address-info-cell-input"><textarea placeholder="请填写详细街道楼层门牌号等" v-model="form.address"></textarea></view>
			</view>
		</view>
		<view class="address-info-btn"><button type="primary" @click="submit">{{form.address_id?'修改':'保存'}}</button></view>
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" cancelColor="#666" confirmColor="#2073F5"></simple-address>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					consignee: '',
					mobile: '',
					address: '',
					province_id: '',
					province: '',
					city_id: '',
					city: '',
					district_id: '',
					district: '',
					default_id: 1,
					type: 2
				},
				region: '',
				cityPickerValueDefault: [0, 0, 0],
				id: ''
			};
		},
		onLoad(options) {
			if(options.data){
				uni.setNavigationBarTitle({
					title: '编辑仓库地址'
				})
				this.form = JSON.parse(options.data)
			}
		},
		mounted() {
			let index = this.$refs.simpleAddress.queryIndex([this.form.province, this.form.city, this.form.district], 'label');
			console.log(index)
			this.region = index.data.province.label + ',' + index.data.city.label + ','  + index.data.area.label
			this.cityPickerValueDefault = index.index
		},
		methods: {
			selectRegion(){
				this.$refs.simpleAddress.open();
			},
			onConfirm(e){
				this.form.province_id = e.provinceCode
				this.form.province = e.labelArr[0]
				this.form.city_id = e.cityCode
				this.form.city = e.labelArr[1]
				this.form.district_id = e.areaCode
				this.form.district =  e.labelArr[2]
				this.region = e.labelArr.join(',')
			},
			submit(){
				if(!this.form.consignee){
					uni.showToast({
						icon: 'none',
						title: '请输入姓名',
						duration: 1500
					})
					return false
				}else if(!this.form.mobile){
					uni.showToast({
						icon: 'none',
						title: '请输入手机号码',
						duration: 1500
					})
					return false
				}else if(!this.form.province_id){
					uni.showToast({
						icon: 'none',
						title: '请选择所在地区',
						duration: 1500
					})
					return false
				}else if(!this.form.address){
					uni.showToast({
						icon: 'none',
						title: '请输入详细地址',
						duration: 1500
					})
					return false
				}else{
					if(!this.form.address_id){
						this.$api.AddressAdd(this.form).then(res => {
							uni.showToast({
								icon: 'none',
								title: '添加成功',
								duration: 1500
							})
							setTimeout(() => {
								uni.navigateBack()
							},1500)
						})
					}else{
						delete this.form.type
						this.$api.AddressUpdate(this.form).then(res => {
							uni.showToast({
								icon: 'none',
								title: '修改成功',
								duration: 1500
							})
							setTimeout(() => {
								uni.navigateBack()
							},1500)
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.address-info{
		padding-top: 20rpx;
		.address-info-cell{
			display: flex;
			align-items: center;
			background-color: #FFF;
			border-bottom: solid 1px #EEE;
			padding: 40rpx 20rpx;
			&.address-des{
				align-items: flex-start;
				textarea{
					color: #333;
					width: 100%;
					line-height: 30rpx;
					text-align: left;
					vertical-align: top;
					box-sizing: border-box;
					height: 100rpx;
					min-height: 100rpx;
					font-size: 32rpx;
					line-height: 42rpx;
				}
			}
			&:last-child{
				border-bottom: none;
			}
			.address-info-cell-tit{
				font-size: 32rpx;
				width: 4em;
			}
			.address-info-cell-input{
				flex: 1;
				margin: 0 20rpx;
				color: #888;
				font-size: 32rpx;
				&.active{
					color: #333;
				}
				input{
					color: #333;
					font-size: 32rpx;
				}
				image{
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					background-color: #EEE;
				}
			}
			.address-info-cell-arrow{
				image{
					width: 12rpx;
					height: 20rpx;
				}
			}
		}
		.address-info-btn{
			padding: 50rpx 75rpx;
			button{
				background-color: #2073F5;
				border-radius: 100rpx;
				height: 100rpx;
				line-height: 100rpx;
			}
		}
	}
</style>
